<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<!-- <view class="profile">
      <view class="meta"> -->
		<!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
		<!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
		<!-- <text class="nickname">孙悟空</text> -->
		<!-- <open-data class="nickname" type="userNickName"></open-data> -->
		<!-- </view> -->
		<!-- </view> -->

		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img">
							<!-- 这里可以放自己的静态头像 -->
							<!-- #ifndef MP-WEIXIN -->
							<image style="width: 100px; height: 80px;" src=""></image>
							<!-- #endif -->
							<open-data type="userAvatarUrl" class="user_head"></open-data>
						</view>
						<view class="center_info">
							<view class="center_vip">
								<!-- <image class="rank_icon" src="@/static/xingming.png" />    -->
								<view class="vip_text1">
									<text style="font-size: 25px;">{{ userName }}</text>
								</view>
							</view>
							<view class="center_vip">
								<image class="rank_icon" src="@/static/juese.png" />
								<view class="vip_text">
									<text>售后人员</text>
								</view>
							</view>
						</view>
						<view style="margin-left: 140rpx;margin-top: 15rpx;">
							<image style="width: 30px;height: 30px;"></image>
						</view>
					</view>
					<!-- <view class="center_down">
						<view class="center_rank" @tap="toNone">
							<image class="rank_icon" src="@/static/icon/vip.png"></image>
							<text class="rank_text">我的排名</text>
						</view>
						<view class="center_score" @tap="toNone">
							<image class="rank_icon" src="../../static/points.png"></image>
							<text class="rank_text">我的积分</text>
						</view>
					</view> -->
				</view>
				<image src='' mode='scaleToFill' class='gif-wave'></image>
			</view>
		</view>


		<!-- 统计 -->
		<!-- <view class="count">
			<view class="cell"> 8 <text style="color: #AAAAAA;">收藏店铺</text> </view>
			<view class="cell"> 14 <text style="color: #AAAAAA;">收藏商品</text> </view>
			<view class="cell"> 18 <text style="color: #AAAAAA;">关注商品</text> </view>
			<view class="cell"> 84 <text style="color: #AAAAAA;">我的足迹</text> </view>
		</view> -->
		<!-- 我的订单 -->
		<view class="orders">
			<view class="title">我的操作</view>
			<view class="sorts">

				<view style="margin-top: -10rpx;margin-left: 60rpx;" @click="saoma">
					<image src='@/static/saoma.png' style="width: 30px;height: 30px;"></image>
				</view>
				<view style="margin-top: 60rpx;margin-left: -60rpx;margin-bottom: -20rpx;">
					<text class="icon-bill">扫码打卡</text>
				</view>

				<view style="margin-top: -15rpx;margin-left: 95rpx;"
					@tap="gotoFeeds('/pages/afterSaleVue/inputClock/inputClock')">
					<image src='@/static/shuru.png' style="width: 40px;height: 40px;"></image>
				</view>
				<view style="margin-top: 60rpx;margin-left: -75rpx;margin-bottom: -20rpx;">
					<text class="icon-car">输入打卡</text>
				</view>
				<!-- <view style="margin-top: -15rpx;margin-left: 95rpx;"  @tap="gotoFeeds('/pages/afterSaleVue/cardReplenishment/cardReplenishment')">
						<image src='@/static/jilu.png' style="width: 40px;height: 40px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -80rpx;margin-bottom: -20rpx;">
						<text class="icon-money">打卡记录</text>
					</view> -->
				<view style="margin-top: -15rpx;margin-left: 95rpx;"
					@tap="gotoFeeds('/pages/afterSaleVue/cardReplenishment/cardReplenishment')">
					<image src='@/static/jilu.png' style="width: 40px;height: 40px;"></image>
				</view>
				<view style="margin-top: 60rpx;margin-left: -80rpx;margin-bottom: -20rpx;">
					<text class="icon-money">补卡记录</text>
				</view>
				<!-- <view style="margin-top: -10rpx;margin-left: 60rpx;" @click="saoma1">
					<image src='@/static/saoma.png' style="width: 30px;height: 30px;"></image>
				</view>
				<view style="margin-top: 60rpx;margin-left: -60rpx;margin-bottom: -20rpx;">
					<text class="icon-bill">扫码工单</text>
				</view> -->
				<!-- <view style="margin-top: -15rpx;margin-left: 95rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<image src='@/static/icon/allorder.png' style="width: 40px;height: 40px;"></image>
					</view>
					<view style="margin-top: 60rpx;margin-left: -85rpx;margin-bottom: -20rpx;" @tap="gotoFeeds('/pages/sort/sort')">
						<text class="icon-list">全部订单</text>
					</view> -->

			</view>
		</view>
		<!-- 地址管理 -->
		<view class="address icon-arrow" @click="clientUserManual">
			<!-- <view class="address icon-arrow" @tap="gotoFeeds('/pages/afterSaleVue/operationManual/operation')"> -->
			操作手册
		</view>
		<!-- 其它 -->
		<view class="extra">
			<view class="item icon-arrow">联系客服</view>
			<button style="color: red;" class="item icon-arrow" @tap="gotoFeeds('/pages/index/index')">退出登录</button>
		</view>
		<userTab selectedIndex=2></userTab>
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState
	} from 'vuex';
	import amap from '@/static/js/amap-wx.130.js';
	export default {
		data() {
			return {
				date: new Date().toISOString(),
				userInfo: {}, // 存储用户信息
				image: '',
				userList: [],
				userName: '',
				ama: [],
				amapPlugin: null,
				gaodekey: '2d6b6ba0a141c6befeb128bff2bbfbe2', //高德key,此处的key需要去高德平台申请获取，此key是假的！！！
				address: "", // 已经获取到的位置
				contentData:[]
			}
		},
		// 得到属性userInfo
		// computed: {
		// 	...mapState(['userInfo'])
		// },
		// created(){
		// 	this.selectImageUrl()
		// },
		onLoad() {
			uni.$on('workOrderNumberMsg', (data) => {
				//我把传过来的数据存到了 data 中
				console.log(data,"--------------------------------")
				this.userList = data
				this.userName = data.nickName
				//    this.userName = data.data[1]
				console.log(data.nickName, "*********************");
			})
			uni.$emit('send')
			this.getLocation()
			// console.log(this.userList.nickName)
			// this.userName = this.userList.nickName
			this.getUserInfo();
		},

		methods: {
			async getUserInfo() {
				try {
					const res = await uni.getUserInfo({
						withCredentials: true,
						success: (info) => {
							this.userInfo = info;
							console.log(info.userInfo)
							this.image = info.userInfo.avatarUrl
						}
					});
				} catch (error) {
					console.error(' 获取用户信息失败', error);
				}
			},
			// async selectImageUrl(){
			// 	console.log("66666666666")
			// 	console.log(this.userInfo.name)
			// 	this.avatarUrl = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(res.detail.avatarUrl,'base64')
			// 	let res = await this.$u.api.selectImageUrl({
			// 		params: {
			// 			user: this.userInfo.name
			// 		}
			// 	})
			// 	this.image = this.avatarUrl
			// 	console.log("this.image ",this.image )
			// },
			dateFormat1(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day;
				// return year + "-" + month + "-" + day;
			},
			dateFormat2(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			//获取坐标
			getLocation() {
				const _this = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.gaodekey
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位');

						_this.address =
							`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;

						// _this.address 可根据自己的实际情况修改
						_this.address = `${data[0].regeocodeData.formatted_address}`;
						// 传出
						_this.$emit("lodAddress", _this.address)
						uni.hideLoading();
						this.ama = data
					},
					// 获取位置失败
					fail: (err) => {
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "error"
						})
					}
				});
			},
			saoma() {
				// 坐标获取
				// console.log("---------------------------------")
				// console.log(this.getLocation());
				// this.getLocation().
				// console.log(this.ama)
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							const val = res.result;
							if (val.includes("SMAC")) {
								uni.request({
									url: "https://www.smacaftersales.com:443/punchRecord/punchRecord/afterSalesCheckIn",
									// url: "http://localhost:8080/punchRecord/punchRecord/afterSalesCheckIn",
									method: "POST",
									data: {
										userid: this.userList.userId,
										deviceid: val,
										position: this.ama[0].name + this.ama[0].desc,
										lat: this.ama[0].latitude,
										lng: this.ama[0].longitude,
										clockdate: this.dateFormat1(this.date),
										clocktime: this.dateFormat2(this.date),
									},
									header: {
										// "Content-type": "application/x-www-form-urlencoded",
										"Content-type": "application/json",
										// "Content-type": "multipart/form-data"
										// "Content-type": "text/xml"
									},
									success: (res) => {
										console.log(res, "===========");
										if (res.data.data == 1) {
											setTimeout(function() {
												// 页面重载
												const pages = getCurrentPages()
												// 声明一个pages使用getCurrentPages方法
												const curPage = pages[pages.length - 1]
												// 声明一个当前页面
												curPage.onLoad(curPage.options) // 传入参数
												curPage.onShow()
												curPage.onReady()
												// 执行刷新
											}, 2000);

											uni.showToast({
												title: '打卡成功',
												icon: 'success', //如果要纯文本，不要icon，将值设为'none'
												duration: 2000, //持续时间为 2秒
												mask: false,
											})
										} else {
											uni.showToast({
												title: '打卡失败',
												icon: 'error', //如果要纯文本，不要icon，将值设为'none'
												duration: 2000, //持续时间为 2秒
												mask: false,
											})
										}
									},
								});
							} else {
								uni.showToast({
									title: '扫描不是机器二维码',
									icon: 'success', //如果要纯文本，不要icon，将值设为'none'
									duration: 2000, //持续时间为 2秒
									mask: false,
								})
							}
							// uni.navigateTo({																	
							// 	url: '/pages/deviceInformation/deviceInformation'
							// });
						} else {

							// console.log('请重新扫描');
							return false;
							uni.showToast({
								title: '请重新扫描',
								icon: 'none', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000, //持续时间为 2秒
								mask: false,
							})
						}
					},
					fail: (res) => {
						// console.log('未识别到二维码');
						uni.showToast({
							title: '未识别到二维码',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000, //持续时间为 2秒
							mask: false,
						})
					}
				})
			},
			//扫码进入工单
			saoma1() {
				// 坐标获取
				// console.log("---------------------------------")
				// console.log(this.getLocation());
				// this.getLocation().
				// console.log(this.ama)
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							const val = res.result;
							if (val.includes("SMAC")) {
								
										uni.request({
											url: "https://www.smacaftersales.com:443/workOrder/workOrder/getPageData",
											method: "POST",
											data: {
												userName: this.userName,
											},
											header: {
												"Content-type": "application/x-www-form-urlencoded",
												// "Content-type": "application/json",
												// "Content-type": "multipart/form-data"
												// "Content-type": "text/xml"
											},
											success: (res) => {
												this.contentData = []
												for (var i = 0; i < res.data.data.length; i++) {
														let l = [{
															department: '',
															technology: '',
															procure: '',
															userId: this.userList.userId,
															userName: this.userList.nickName,
															projectName: res.data.data[i].projectName,
															afterSales8DForm: res.data.data[i].afterSales8DForm,
															confirmationForm: res.data.data[i].confirmationForm,
															workEndTime: res.data.data[i].workEndTime,
															groupLeader: res.data.data[i].groupLeader,
															location: res.data.data[i].location,
															workid: res.data.data[i].workid,
															contacts: res.data.data[i].contacts,
															createBy: res.data.data[i].createBy,
															createTime: res.data.data[i].createTime,
															customername: res.data.data[i].customername,
															customerphone: res.data.data[i].customerphone,
															deliverytime: res.data.data[i].deliverytime,
															detailspath: res.data.data[i].detailspath,
															devicemodel: res.data.data[i].devicemodel,
															devicetype: res.data.data[i].devicetype,
															dispatchedPersonnel: res.data.data[i].dispatchedPersonnel,
															openId: res.data.data[i].openId,
															position: res.data.data[i].position,
															problemdescription: res.data.data[i].problemdescription,
															productiongroup: res.data.data[i].productiongroup,
															productionleader: res.data.data[i].productionleader,
															remark: res.data.data[i].remark,
															searchValue: res.data.data[i].searchValue,
															serialnumber: res.data.data[i].serialnumber,
															status: res.data.data[i].status,
															updateBy: res.data.data[i].updateBy,
															updateTime: res.data.data[i].updateTime,
															workendtime: res.data.data[i].workendtime,
															workordernumber: res.data.data[i].workordernumber,
															worktime: res.data.data[i].worktime,
															workSummary: res.data.data[i].workSummary,
															salespersonName: res.data.data[i].salespersonName,
															type: "0",
															imgeUrl: "../../../static/工单.png",
															content: res.data.data[i].projectName + "   " + res.data.data[i]
																.workordernumber,
															time: res.data.data[i].worktime
														}]
														this.contentData.push(l[0])
													}
													
													console.log(this.contentData,"******************************")
											},
									})
								
							} else {
								uni.showToast({
									title: '扫描不是机器二维码',
									icon: 'success', //如果要纯文本，不要icon，将值设为'none'
									duration: 2000, //持续时间为 2秒
									mask: false,
								})
							}
							// uni.navigateTo({																	
							// 	url: '/pages/deviceInformation/deviceInformation'
							// });
						} else {
							// console.log('请重新扫描');
							return false;
							uni.showToast({
								title: '请重新扫描',
								icon: 'none', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000, //持续时间为 2秒
								mask: false,
							})
						}
					},
					fail: (res) => {
						// console.log('未识别到二维码');
						uni.showToast({
							title: '未识别到二维码',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000, //持续时间为 2秒
							mask: false,
						})
					}
				})
			},
			clientUserManual() {
				try {
					const url = 'https://after.smacaftersales.com:9999/instructions/售后人员.pdf';
					this.PDFView.downloadAndOpenFile(url)
				} catch (err) {
					// console.error('文件下载或打开失败:', err);  
					uni.showToast({
						title: "文件下载或打开失败",
						duration: 1500,
						icon: 'none'
					})

				}
			},
			gotoFeeds(url) {
				// 可以跳多级目录
				uni.navigateTo({
					url
				})
				//跳转同级路由目录
				// uni.switchTab({
				// 	url
				// })
			}
		}
	};
</script>

<style scoped lang="scss">
	Page {
		font-size: 14px;
	}

	.top {
		width: 100%;
		height: 130px;
		background: #23EBB9;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 100px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_img .user_head {
		width: 100%;
		height: 100%;
	}

	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	// .center_down {
	// 	display: flex;
	// 	flex-direction: row;
	// 	width: 80%;
	// 	height: 35px;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// }

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.center_vip image {
		width: 25px;
		height: 25px;
		margin-top: 15rpx;
	}

	.vip_icon {
		width: 25px;
		height: 25px;
		margin-top: -10rpx;
	}

	.vip_text {
		margin-top: -55rpx;
		margin-left: 50rpx;
		color: #AAAAAA;
	}

	.vip_text1 {
		margin-top: 0rpx;
		margin-left: 0rpx;
		color: #000000;
	}

	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;

		width: 100%;
		background-color: #F4F4F4;
	}

	.profile {
		height: 375rpx;
		background-color: #ea4451;
		display: flex;
		justify-content: center;
		align-items: center;

		.meta {
			.avatar {
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				overflow: hidden;
			}

			.nickname {
				display: block;
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.count {
		display: flex;
		margin: 0 20rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #fff;

		position: relative;
		top: 10rpx;

		.cell {
			margin-top: 10rpx;
			flex: 1;
			padding-top: 20rpx;
			font-size: 27rpx;
			color: #333;
		}

		text {
			display: block;
			font-size: 24rpx;
		}
	}

	.orders {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 4rpx;

		.title {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #333;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			margin-top: -30rpx;
		}

		.sorts {
			padding-top: 30rpx;
			text-align: center;
			display: flex;
		}

		[class*="icon-"] {
			flex: 1;
			font-size: 24rpx;

			&::before {
				display: block;
				font-size: 48rpx;
				margin-bottom: 8rpx;
				color: #ea4451;
			}
		}
	}

	.address {
		line-height: 1;
		background-color: #fff;
		font-size: 30rpx;
		padding: 25rpx 0 25rpx 20rpx;
		margin: 10rpx 20rpx;
		color: #333;
		border-radius: 4rpx;
	}

	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
</style>